<html>
	<head>
		<title>{{ projectname }}</title>
		<link href="/style.css" rel="stylesheet"/>
        <link href="/theme-gray.css" rel="stylesheet"/>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="/imageopen.js"></script>
    </head>
    <body>
        <header class="subhead jumbotron">
            <div class="container">
                <h1>{{ projectname }}</h1>
                <p>{{ subtitle }}</p>
            </div>
            <div class="navbar hnavbar">
                <div class="hnavbar-inner">
                    <ul class="nav hnav">
                    	{% for item in categories  %}
                        <li{{ ' class="active"' if item.active }}><a href="{{ item.href }}">{{ item.caption }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </header>
        <div class="body-container">
            <div class="left-body">
                <div class="navbar vnavbar">
                    <ul class="nav vnav">
                    	{% for subcat in subcategories %}
                        <li class="vnav-title nav-title">{{ subcat.caption }}</li>
                        	{% for art in subcat.articles %}
                        	<li{{ ' class="active"' if art.active }}><a href="{{ art.href }}">{{ art.caption }}</a></li>
                        	{% endfor %}

                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="right-body">
                <div class="content">
                    <div class="page-header">
                        <h1>{{ cursubcategory }}</h1>
                    </div>
                    <h2>{{ page.caption }}</h2>

                    <div class="pagination-outer">
                        <div class="pagination">
                            <div class="prev button{{ ' disabled' if not pagination.prevart }}">
                                <a{{ ' href="%s"' % pagination.prevart if pagination.prevart }}>Previous article</a>
                            </div>
                            <div class="pages">
                            	{% if pagination.pages.__len__() != 1 %}
                                <ul>
                                    <li{{ ' class="disabled"' if not pagination.prev }}><a{{ ' href="%s"' % pagination.prev if pagination.prev }}>&lt;</a></li>
                                    {% for item in pagination.pages %}
                                    <li{{ ' class="active"' if item.active }}><a href="{{ item.href }}">{{ item.caption }}</a></li>
                                    {% endfor %}
                                    <li{{ ' class="disabled"' if not pagination.next }}><a{{ ' href="%s"' % pagination.next if pagination.next }}>&gt;</a></li>
                                </ul>
                                {% endif %}
                            </div>
                            <div class="next button{{ ' disabled' if not pagination.nextart }}">
                                <a{{ ' href="%s"' % pagination.nextart if pagination.nextart }}>Next article</a>
                            </div>
                        </div>
                    </div>


                    <div class="article">
                    	{% for paragraph in page.paragraphs %}
                        <div class="paragraph" id="paragraph-{{ loop.index0 }}">
                        	{% if paragraph.media %}
                            <div class="paragraph-media" onclick="maximize('paragraph-{{ loop.index0 }}')">
                                <img {{ ' class="%s"' % paragraph.imgstyle if paragraph.imgstyle }} src="{{ paragraph.media }}"></img>
                            </div>
                        	{% endif %}
                        	{{ paragraph.content }}
                        </div>
                        {% endfor %}
                    </div>

                    <div class="pagination-outer">
                        <div class="pagination">
                            <div class="prev button{{ ' disabled' if not pagination.prevart }}">
                                <a{{ ' href="%s"' % pagination.prevart if pagination.prevart }}>Previous article</a>
                            </div>
                            <div class="pages">
                            	{% if pagination.pages.__len__() != 1 %}
                                <ul>
                                    <li{{ ' class="disabled"' if not pagination.prev }}><a{{ ' href="%s"' % pagination.prev if pagination.prev }}>&lt;</a></li>
                                    {% for item in pagination.pages %}
                                    <li{{ ' class="active"' if item.active }}><a href="{{ item.href }}">{{ item.caption }}</a></li>
                                    {% endfor %}
                                    <li{{ ' class="disabled"' if not pagination.next }}><a{{ ' href="%s"' % pagination.next if pagination.next }}>&gt;</a></li>
                                </ul>
                                {% endif %}
                            </div>
                            <div class="next button{{ ' disabled' if not pagination.nextart }}">
                                <a{{ ' href="%s"' % pagination.nextart if pagination.nextart }}>Next article</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-end"></div>
        </div>
        <div class="footer">
            <div class="container">
                <div class="credits">
                    {{ footer }}
                </div>
            </div>
        </footer>
    </body>
</html>
